<template>
  <div class="layout-all">
    <control :config="config" />
    <div class="layout-content">
      <el-table
        :data="tableData"
        stripe
        align="center"
        highlight-current-row
        style="width: 100%;margin-top:50px"
      >
      <el-table-column
          label="用户"
          align="center"
          type="expand"
          width="80"
        >
          <template slot-scope="scope">
            <el-table
              tooltip-effect="dark"
              :data="scope.row.group_user"
            >
              <el-table-column align="center" prop="create_time" label="创建时间" width="160" />
              <el-table-column align="center" prop="status_str" label="状态" width="80"/>
             <el-table-column align="center" prop="nickname" label="昵称" width="150">
           <template slot-scope="scope">
             <div icon="el-icon-platform-eleme" :style="{color:scope.row.user.sex==1?'#409eff':scope.row.user.sex==0?'#a4959a':'#D650BD'}" >
               {{scope.row.user.nickname}}</div>
            </template>
        </el-table-column>
              <el-table-column align="center" prop="images" label="图片" width="150">
                <template slot-scope="scope">
                  <pre-view :src="scope.row.user.headimgurl" :auto="true"/>
                </template>
              </el-table-column>
            </el-table>
          </template>
      </el-table-column>
      <el-table-column align="center" prop="id" label="序号" width="70" :fixed="isMobile()?'left':undefined"/>
      <el-table-column align="center" prop="type" label="类型" width="100">
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.type %2==0 ? 'primary' : 'success'"
            >{{ type_arr[scope.row.type] }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="title" label="团购名称" />

        <el-table-column align="center" prop="create_time" label="开始时间" width="180" />
        <el-table-column align="center" prop="auto_cancel_time" label="结束时间" width="180" />
        <el-table-column align="center" prop="people_count" label="当前人数"  width="100"/>
        
        <el-table-column align="center" prop="max_people_count" label="成团人数" width="100"/>

        <el-table-column align="center" prop="status" label="状态" width="100">
          <template slot-scope="scope">
             <el-tag
              :type="scope.row.status %2==0 ? 'primary' : 'success'"
            >{{ status_arr[scope.row.status] }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="invented_user" label="虚拟人数"  width="100">
          <template slot-scope="scope">
            <input type="text" style="width:100px;" v-if="edit_index == scope.$index" v-model="scope.row.count" />
            <el-tag v-else >{{scope.row.invented_user.length}}</el-tag>
            </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="telephone"
          :fixed="isMobile()?undefined:'right'"
          width="200"
          label="操作"
        >
          <template slot-scope="scope">
             <el-button size="small" type="success" icon="el-icon-check" v-if="edit_index == scope.$index" @click="saveInfo(scope.row)" /> 
            <el-button v-if="scope.row.status==0||scope.row.status==3" size="small" type="primary" icon="el-icon-edit"  @click="editInfo(scope)"/>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
      :current-page="current_page"
      :page-size="per_page"
      layout="total, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <drawer title="团购用户" :isShow="spec_dialog"  @update:isShow="spec_dialog=false" :width="'.3'">
      <el-tag v-for="(item,index) in userlist" :key="index" :type="index %2==0 ? 'primary' : 'success'" size="mini" >{{ item }}</el-tag>
    </drawer>
  </div>
</template>

<script>
import control from '../../components/control/control'
export default {
  name:"group_buy_index",
  components: { control },
  data() {
    return {
      thumb_url: "",
      spec_id:'',
      type_arr:[],
      status_arr:[],
      userlist:[],
      goods_id: 0,
      config: [
        { type: 'text', placeholder: '请输入团购名称', field: 'title', val: '' },
        { type: 'select', placeholder: '选择类型', field: 'type', val: '', options:[]},
        { type: 'select', placeholder: '选择状态', field: 'status', val: '', options:[]},
      ],
      value: '',
      searchWhere: {
        title: ''
      },
      tableData: [],
      total: 0,
      edit_index: -1,
      current_page: 1,
      per_page: 14,
      spec_dialog: false,
      stoc_visible: false,

      spec_tableData: []
    }
  },
  activated(){
    if(this.$getUpdate()){
      this.onSearch()
    }
  },
  created() {
    this.onSearch()
  },
  methods: {
    editInfo (item) {
      item.row.count=item.row.invented_user.length
      if (this.edit_index != item.$index) {
        this.edit_index = item.$index
      } else {
        this.edit_index = -1
      }
      
    },
    saveInfo (item) {
      if(item.count>=item.max_people_count-item.people_count-item.type){
        this.$msg_ok('error','虚拟人数过大')
        return
      }
      this.get('/admin/GroupBooking/save_count', {id:item.id,count:item.count}, 'POST').then(e => {
        this.edit_index = -1
        this.onSearch()
      })
    },
    // 查询
    handleSizeChange(val) {
      this.onSearch()
    },
    handleCurrentChange(val) {
      this.current_page = val
      this.onSearch()
    },
    onSearch() {
      const form = {}
      form.page = this.current_page
      form.map = this.searchWhere
      this.get('/admin/GroupBooking/index', form, 'POST').then(e => {
        this.tableData = e.list.data
        this.per_page = e.list.per_page
        this.type_arr = e.type_arr
        this.status_arr = e.status_arr
        this.total = e.list.total
        this.current_page = e.list.current_page
        this.config[1].options=e.type_arr
        this.config[2].options=e.status_arr
      })
    },

    // 修改状态
    change_status(id, field, val) {
      this.update(id, val, field, 'GoodsGroup','shop').then(e => {
        e ? this.onSearch() : ''
      })
    },

    //打开规格
    stock_click(row) {
      this.get('/admin/GroupBooking/user', {id:row.id}, 'post').then(e => {
        this.userlist=e.data
        this.spec_dialog = true;
      })
      
    },

    change_status2(id, field, val) {
      const form = {}
      form.id = id
      form.field = field
      val === 1 ? form.val = 0 : form.val = 1
      this.get('/shop/GoodsGroup/spec_status', form, 'post').then(e => {
        this.$msg_ok('success', '修改成功')
        this.spec_info(this.goods_id)
      })
    },

  }
}
</script>

<style>
.layout-all {
  margin-top: 20px;
  margin-left: 10px;
}
.layout-content {
  margin-top: 20px;
}
</style>>
